<template>
    <div>
        <apply-header :flag="'1'"></apply-header>
        <div class="main">
            <Side :step="'1'"></Side>
            <section>
                <div class="info-form" v-if="!showResult">
                    <div class="box">
                        <h1 style="text-align: center;font-size: 26px">*eAssist Color Profile</h1>
                        <p style="margin: 10px 0">Instructions:</p>
                        <div class="mt10 fs14 lh25">Please check the one word or phrase that best describes what you were like most of the time in your earliest recollection. Choose only one response from each
                            group.
                        </div>
                        <p class="required" style="margin: 10px 0">* Required</p>
                    </div>
                </div>

                <el-form :inline="false" :rules="rules" :model="form" ref="form">
<!--                    :model="form"-->
<!--                    ref="form"-->
                    <div class="box">
                        <div class="subjectTest noTitle">1.</div>
                        <el-form-item prop="sub0">
                            <el-radio-group ref="sub0" v-model="form.sub0" :disabled="isAdmin">
                                <el-radio :label="0">Opinionated</el-radio><br>
                                <el-radio :label="2">Inventive</el-radio><br>
                                <el-radio :label="1">Nurturing</el-radio><br>
                                <el-radio :label="3">Outgoing</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">2.</div>
                        <el-form-item prop="sub1">
                            <el-radio-group ref="sub1" v-model="form.sub1" :disabled="isAdmin">
                                <el-radio :label="0">Power-oriented</el-radio><br>
                                <el-radio :label="1">A perfectionist</el-radio><br>
                                <el-radio :label="2">Inventive</el-radio><br>
                                <el-radio :label="3">Self-Centered</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="box">
                        <div class="subjectTest noTitle">3.</div>
                        <el-form-item prop="sub2">
                            <el-radio-group ref="sub2" v-model="form.sub2" :disabled="isAdmin">
                                <el-radio :label="0">Dominant</el-radio><br>
                                <el-radio :label="1">Sympathetic</el-radio><br>
                                <el-radio :label="2">Tolerant</el-radio><br>
                                <el-radio :label="3">Enthusiastic</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="box">
                        <div class="subjectTest noTitle">4.</div>
                        <el-form-item prop="sub3">
                            <el-radio-group ref="sub3" v-model="form.sub3" :disabled="isAdmin">
                                <el-radio :label="0">Self-serving</el-radio><br>
                                <el-radio :label="1">Suspicious</el-radio><br>
                                <el-radio :label="2">Unsure</el-radio><br>
                                <el-radio :label="3">Naive</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">5.</div>
                        <el-form-item prop="sub4">
                            <el-radio-group ref="sub4" v-model="form.sub4" :disabled="isAdmin">
                                <el-radio :label="0">Decisive</el-radio><br>
                                <el-radio :label="1">Loyal</el-radio><br>
                                <el-radio :label="2">Contented</el-radio><br>
                                <el-radio :label="3">Playful</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">6.</div>
                        <el-form-item prop="sub5">
                            <el-radio-group ref="sub5" v-model="form.sub5" :disabled="isAdmin">
                                <el-radio :label="0">Arrogant</el-radio><br>
                                <el-radio :label="1">Worry-prone</el-radio><br>
                                <el-radio :label="2">Silently stubborn</el-radio><br>
                                <el-radio :label="3">Flighty</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">7.</div>
                        <el-form-item prop="sub6">
                            <el-radio-group ref="sub6" v-model="form.sub6" :disabled="isAdmin">
                                <el-radio :label="0">Assertive</el-radio><br>
                                <el-radio :label="1">Reliable</el-radio><br>
                                <el-radio :label="2">Kind</el-radio><br>
                                <el-radio :label="3">Sociable</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">8.</div>
                        <el-form-item prop="sub7">
                            <el-radio-group ref="sub7" v-model="form.sub7" :disabled="isAdmin">
                                <el-radio :label="0">Bossy</el-radio><br>
                                <el-radio :label="1">Self-critical</el-radio><br>
                                <el-radio :label="2">Reluctant</el-radio><br>
                                <el-radio :label="3">A teaser</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">9.</div>
                        <el-form-item prop="sub8">
                            <el-radio-group ref="sub8" v-model="form.sub8" :disabled="isAdmin">
                                <el-radio :label="0">Action-oriented</el-radio><br>
                                <el-radio :label="1">Analytical</el-radio><br>
                                <el-radio :label="2">Easygoing</el-radio><br>
                                <el-radio :label="3">Carefree</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div class="box">
                        <div class="subjectTest noTitle">10.</div>
                        <el-form-item prop="sub9">
                            <el-radio-group ref="sub9" v-model="form.sub9" :disabled="isAdmin">
                                <el-radio :label="0">Critical of others</el-radio><br>
                                <el-radio :label="1">Overly sensitive</el-radio><br>
                                <el-radio :label="2">Shy</el-radio><br>
                                <el-radio :label="3">Obnoxious</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">11.</div>
                        <el-form-item prop="sub10">
                            <el-radio-group ref="sub10" v-model="form.sub10" :disabled="isAdmin">
                                <el-radio :label="0">Determined</el-radio><br>
                                <el-radio :label="1">Detail conscious</el-radio><br>
                                <el-radio :label="2">A good listener</el-radio><br>
                                <el-radio :label="3">A party person</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">12.</div>
                        <el-form-item prop="sub11">
                            <el-radio-group ref="sub11" v-model="form.sub11" :disabled="isAdmin">
                                <el-radio :label="0">Demanding</el-radio><br>
                                <el-radio :label="1">Detail</el-radio><br>
                                <el-radio :label="2">Unmotivated</el-radio><br>
                                <el-radio :label="3">Vain</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">13.</div>
                        <el-form-item prop="sub12">
                            <el-radio-group ref="sub12" v-model="form.sub12" :disabled="isAdmin">
                                <el-radio :label="0">Responsible</el-radio><br>
                                <el-radio :label="1">Idealistic</el-radio><br>
                                <el-radio :label="2">Considerate</el-radio><br>
                                <el-radio :label="3">Happy</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">14.</div>
                        <el-form-item prop="sub13">
                            <el-radio-group ref="sub13" v-model="form.sub13" :disabled="isAdmin">
                                <el-radio :label="0">Impatient</el-radio><br>
                                <el-radio :label="1">Moody</el-radio><br>
                                <el-radio :label="2">Passive</el-radio><br>
                                <el-radio :label="3">Impulsive</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">15.</div>
                        <el-form-item prop="sub14">
                            <el-radio-group ref="sub14" v-model="form.sub14" :disabled="isAdmin">
                                <el-radio :label="0">Strong-willed</el-radio><br>
                                <el-radio :label="1">Respectful</el-radio><br>
                                <el-radio :label="2">Patient</el-radio><br>
                                <el-radio :label="3">Fun-loving</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">16.</div>
                        <el-form-item prop="sub15">
                            <el-radio-group ref="sub15" v-model="form.sub15" :disabled="isAdmin">
                                <el-radio :label="0">Argumentative</el-radio><br>
                                <el-radio :label="1">Unrealistic</el-radio><br>
                                <el-radio :label="2">Directionless</el-radio><br>
                                <el-radio :label="3">An interrupter</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">17.</div>
                        <el-form-item prop="sub16">
                            <el-radio-group ref="sub16" v-model="form.sub16" :disabled="isAdmin">
                                <el-radio :label="0">Independent</el-radio><br>
                                <el-radio :label="1">Dependable</el-radio><br>
                                <el-radio :label="2">Even-Tempered</el-radio><br>
                                <el-radio :label="3">Trusting</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">18.</div>
                        <el-form-item prop="sub17">
                            <el-radio-group ref="sub17" v-model="form.sub17" :disabled="isAdmin">
                                <el-radio :label="0">Aggressive</el-radio><br>
                                <el-radio :label="1">Frequently depressed</el-radio><br>
                                <el-radio :label="2">Ambivalent</el-radio><br>
                                <el-radio :label="3">Forgetful</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">19.</div>
                        <el-form-item prop="sub18">
                            <el-radio-group ref="sub18" v-model="form.sub18" :disabled="isAdmin">
                                <el-radio :label="0">Powerful</el-radio><br>
                                <el-radio :label="1">Deliberate</el-radio><br>
                                <el-radio :label="2">Gentle</el-radio><br>
                                <el-radio :label="3">Optimistic</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">20.</div>
                        <el-form-item prop="sub19">
                            <el-radio-group ref="sub19" v-model="form.sub19" :disabled="isAdmin">
                                <el-radio :label="0">Insensitive</el-radio><br>
                                <el-radio :label="1">Judgmental</el-radio><br>
                                <el-radio :label="2">Boring</el-radio><br>
                                <el-radio :label="3">Undisciplined</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">21.</div>
                        <el-form-item prop="sub20">
                            <el-radio-group ref="sub20" v-model="form.sub20" :disabled="isAdmin">
                                <el-radio :label="0">Logical</el-radio><br>
                                <el-radio :label="1">Emotional</el-radio><br>
                                <el-radio :label="2">Agreeable</el-radio><br>
                                <el-radio :label="3">Popular</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">22.</div>
                        <el-form-item prop="sub21">
                            <el-radio-group ref="sub21" v-model="form.sub21" :disabled="isAdmin">
                                <el-radio :label="0">Always right</el-radio><br>
                                <el-radio :label="1">Guilt prone</el-radio><br>
                                <el-radio :label="2">Unenthusiastic</el-radio><br>
                                <el-radio :label="3">Uncommitted</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">23.</div>
                        <el-form-item prop="sub22">
                            <el-radio-group ref="sub22" v-model="form.sub22" :disabled="isAdmin">
                                <el-radio :label="0">Pragmatic</el-radio><br>
                                <el-radio :label="1">Well-behaved</el-radio><br>
                                <el-radio :label="2">Accepting</el-radio><br>
                                <el-radio :label="3">Spontaneous</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">24.</div>
                        <el-form-item prop="sub23">
                            <el-radio-group ref="sub23" v-model="form.sub23" :disabled="isAdmin">
                                <el-radio :label="0">Merciless</el-radio><br>
                                <el-radio :label="1">Thoughtful</el-radio><br>
                                <el-radio :label="2">Uninvolved</el-radio><br>
                                <el-radio :label="3">A show-off</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">25.</div>
                        <el-form-item prop="sub24">
                            <el-radio-group ref="sub24" v-model="form.sub24" :disabled="isAdmin">
                                <el-radio :label="0">Task-oriented</el-radio><br>
                                <el-radio :label="1">Sincere</el-radio><br>
                                <el-radio :label="2">Diplomatic</el-radio><br>
                                <el-radio :label="3">Lively</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">26.</div>
                        <el-form-item prop="sub25">
                            <el-radio-group ref="sub25" v-model="form.sub25" :disabled="isAdmin">
                                <el-radio :label="0">Tactless</el-radio><br>
                                <el-radio :label="1">Hard to please</el-radio><br>
                                <el-radio :label="2">Lazy</el-radio><br>
                                <el-radio :label="3">Loud</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">27.</div>
                        <el-form-item prop="sub26">
                            <el-radio-group ref="sub26" v-model="form.sub26" :disabled="isAdmin">
                                <el-radio :label="0">Direct</el-radio><br>
                                <el-radio :label="1">Creative</el-radio><br>
                                <el-radio :label="2">Adaptable</el-radio><br>
                                <el-radio :label="3">A performer</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">28.</div>
                        <el-form-item prop="sub27">
                            <el-radio-group ref="sub27" v-model="form.sub27" :disabled="isAdmin">
                                <el-radio :label="0">Calculating</el-radio><br>
                                <el-radio :label="1">Self-righteous</el-radio><br>
                                <el-radio :label="2">Self-deprecating</el-radio><br>
                                <el-radio :label="3">Disorganized</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">29.</div>
                        <el-form-item prop="sub28">
                            <el-radio-group ref="sub28" v-model="form.sub28" :disabled="isAdmin">
                                <el-radio :label="0">Confident</el-radio><br>
                                <el-radio :label="1">Disciplined</el-radio><br>
                                <el-radio :label="2">Pleasant</el-radio><br>
                                <el-radio :label="3">Charismatic</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest noTitle">30.</div>
                        <el-form-item prop="sub29">
                            <el-radio-group ref="sub29" v-model="form.sub29" :disabled="isAdmin">
                                <el-radio :label="0">Intimidating</el-radio><br>
                                <el-radio :label="1">Careful</el-radio><br>
                                <el-radio :label="2">Unproductive</el-radio><br>
                                <el-radio :label="3">Afraid to face facts</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">31. If I applied for a job, a prospective employer would most likely
                            hire me because I am:</div>
                        <el-form-item prop="sub30">
                            <el-radio-group ref="sub30" v-model="form.sub30" :disabled="isAdmin">
                                <el-radio :label="0">Driven, direct, and delegating.</el-radio><br>
                                <el-radio :label="1">Deliberate, accurate, and reliable.</el-radio><br>
                                <el-radio :label="2">Patient, adaptable, and tactful.</el-radio><br>
                                <el-radio :label="3">Fun-loving, spirited, and casual.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">32. When involved in an intimate relationship, if I feel threatened by my partner, I:</div>
                        <el-form-item prop="sub31">
                            <el-radio-group ref="sub31" v-model="form.sub31" :disabled="isAdmin">
                                <el-radio :label="0">Fight back with facts and anger.</el-radio><br>
                                <el-radio :label="1">Cry, feel hurt, and plan revenge.</el-radio><br>
                                <el-radio :label="2">Become quiet, withdrawn, and often hold anger until I blow up over some minor issue later.</el-radio><br>
                                <el-radio :label="3">Distance myself and avoid further conflict.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">33. For me, life is most meaningful when it:</div>
                        <el-form-item prop="sub32">
                            <el-radio-group ref="sub32" v-model="form.sub32" :disabled="isAdmin">
                                <el-radio :label="0">Is task-oriented and productive.</el-radio><br>
                                <el-radio :label="1">Is filled with people and purpose.</el-radio><br>
                                <el-radio :label="2">Is free of pressure and stress.</el-radio><br>
                                <el-radio :label="3">Allows me to be playful, lighthearted, and optimistic.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">34. As a child, I was:</div>
                        <el-form-item prop="sub33">
                            <el-radio-group ref="sub33" v-model="form.sub33" :disabled="isAdmin">
                                <el-radio :label="0">Stubborn, bright, and/or aggressive.</el-radio><br>
                                <el-radio :label="1">Well behaved, caring, and/or depressed.</el-radio><br>
                                <el-radio :label="2">Quiet, easygoing, and/or shy.</el-radio><br>
                                <el-radio :label="3">Too talkative, happy, and/or playful.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">35. As an adult, I am:</div>
                        <el-form-item prop="sub34">
                            <el-radio-group ref="sub34" v-model="form.sub34" :disabled="isAdmin">
                                <el-radio :label="0">Opinionated, determined, and/or bossy.</el-radio><br>
                                <el-radio :label="1">Responsible, honest, and/or unforgiving.</el-radio><br>
                                <el-radio :label="2">Accepting, contented, and/or unmotivated.</el-radio><br>
                                <el-radio :label="3">Charismatic, positive, and/or obnoxious.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">36. As an adult, I am:</div>
                        <el-form-item prop="sub35">
                            <el-radio-group ref="sub35" v-model="form.sub35" :disabled="isAdmin">
                                <el-radio :label="0">Demanding, quick-tempered, and / or uncompromising.</el-radio><br>
                                <el-radio :label="1">Concerned, sensitive, and / or critical.</el-radio><br>
                                <el-radio :label="2">Permissive, easily persuaded, and / or often overwhelmed.</el-radio><br>
                                <el-radio :label="3">Playful, casual, and / or irresponsible.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">37. In an argument with a friend, I am most likely to be:</div>
                        <el-form-item prop="sub36">
                            <el-radio-group ref="sub36" v-model="form.sub36" :disabled="isAdmin">
                                <el-radio :label="0">Verbally stubborn about facts.</el-radio><br>
                                <el-radio :label="1">Concerned about others' feelings and principles.</el-radio><br>
                                <el-radio :label="2">Silently stubborn, uncomfortable, and / or confused.</el-radio><br>
                                <el-radio :label="3">Loud, uncomfortable, and / or compromising.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">38. If my friend was in trouble, I would be:</div>
                        <el-form-item prop="sub37">
                            <el-radio-group ref="sub37" v-model="form.sub37" :disabled="isAdmin">
                                <el-radio :label="0">Protective, resourceful, and recommending solutions.</el-radio><br>
                                <el-radio :label="1">Concerned, empathetic, and loyal -- regardless of the problem.</el-radio><br>
                                <el-radio :label="2">Supportive, patient, and a good listener.</el-radio><br>
                                <el-radio :label="3">Nonjudgmental, optimistic, and downplaying the seriousness of the situation.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">39. In an argument with a friend, I am most likely to be:</div>
                        <el-form-item prop="sub38">
                            <el-radio-group ref="sub38" v-model="form.sub38" :disabled="isAdmin">
                                <el-radio :label="0">Assertive, articulate, and logical.</el-radio><br>
                                <el-radio :label="1">Deliberate, precise, and cautious.</el-radio><br>
                                <el-radio :label="2">Indecisive, timid, and reluctant.</el-radio><br>
                                <el-radio :label="3">Impulsive, uncommitted, and inconsistent.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">40. When I fail, I feel:</div>
                        <el-form-item prop="sub39">
                            <el-radio-group ref="sub39" v-model="form.sub39" :disabled="isAdmin">
                                <el-radio :label="0">Silently self-critical, yet verbally stubborn and defensive.</el-radio><br>
                                <el-radio :label="1">Guilty, self-critical, and vulnerable to depression -- I dwell on it.</el-radio><br>
                                <el-radio :label="2">Unsettled and fearful, but I keep it to myself.</el-radio><br>
                                <el-radio :label="3">Embarrassed and nervous -- seeking to escape the situation.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">41.If someone crosses me:</div>
                        <el-form-item prop="sub40">
                            <el-radio-group ref="sub40" v-model="form.sub40" :disabled="isAdmin">
                                <el-radio :label="0">I am angered and cunningly plan ways to get even quickly.</el-radio><br>
                                <el-radio :label="1">I feel deeply hurt and find it almost impossible to forgive completely. Generally, getting even is not enough.</el-radio><br>
                                <el-radio :label="2">I am silently hurt and plan to get even and / or completely avoid the other person.</el-radio><br>
                                <el-radio :label="3">I want to avoid confrontation, consider the situation not important enough to bother with, and / or seek other friends.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">42. Work is:</div>
                        <el-form-item prop="sub41">
                            <el-radio-group ref="sub41" v-model="form.sub41" :disabled="isAdmin">
                                <el-radio :label="0">A most productive way to spend one's time.</el-radio><br>
                                <el-radio :label="1">A healthy activity, which should be done right if it's to be done at all. Work should be done before one plays.</el-radio><br>
                                <el-radio :label="2">A positive activity as long as it is something I enjoy and don't feel pressured to accomplish.</el-radio><br>
                                <el-radio :label="3">A necessary evil, much less inviting than play.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">43. In social situations, I am most often:</div>
                        <el-form-item prop="sub42">
                            <el-radio-group ref="sub42" v-model="form.sub42" :disabled="isAdmin">
                                <el-radio :label="0">Feared by others.</el-radio><br>
                                <el-radio :label="1">Admired by others.</el-radio><br>
                                <el-radio :label="2">Protected by others.</el-radio><br>
                                <el-radio :label="3">Envied by others.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">44. In a relationship, I am most concerned with being:</div>
                        <el-form-item prop="sub43">
                            <el-radio-group ref="sub43" v-model="form.sub43" :disabled="isAdmin">
                                <el-radio :label="0">Approved of and right.</el-radio><br>
                                <el-radio :label="1">Understood, appreciated, and intimate.</el-radio><br>
                                <el-radio :label="2">Respected, tolerant, and peaceful.</el-radio><br>
                                <el-radio :label="3">Praised, having fun, and feeling free.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="box">
                        <div class="subjectTest">45. To feel alive and positive, I seek:</div>
                        <el-form-item prop="sub44">
                            <el-radio-group ref="sub44" v-model="form.sub44" :disabled="isAdmin">
                                <el-radio :label="0">Adventure, leadership, and lots of actions.</el-radio><br>
                                <el-radio :label="1">Security, creativity, and purpose.</el-radio><br>
                                <el-radio :label="2">Acceptance and safety.</el-radio><br>
                                <el-radio :label="3">Excitement, playful productivity, and the company of others.</el-radio><br>
                            </el-radio-group>
                        </el-form-item>
                    </div>

                    <div style="margin-top:10px;margin-bottom: 20px">
                        <el-button class="yellowBtn" @click="submit" v-if="!isAdmin">Submit</el-button>
                        <el-button class="grayBtn" @click="cancel">Cancel</el-button>
                    </div>
                </el-form>
                <div v-if="showResult" style="text-align: center;margin-top: 50px">Of the parts of this exam that can be automatically graded you have recieved
                    <span>{{correctNum}}</span> / {{totalNum}}({{correctPercent}})<br>
                    <el-button class="yellowBtn" style="margin-top: 10px;" @click="goPre">ok</el-button>
                </div>
            </section>
        </div>
        <el-dialog title="warning" :visible.sync="exitVisible">
            <div>Are you sure you want to cancel the test?</div>
            <span slot="footer">
                <el-button class="yellowBtn" @click="goPre">Yes</el-button>
                <el-button class="grayBtn" @click="exitVisible=false">No</el-button>
            </span>
        </el-dialog>
        <el-dialog title="Confirm" :visible.sync="confirmVisible">
            <div>Caution:this portion of our skills assessment test you are about to view cannot be saved for later. You will be scored with no option to return later if you proceed. Do you want to continue?</div>
            <span slot="footer">
                <el-button class="yellowBtn" @click="confirmForm">Yes</el-button>
                <el-button class="grayBtn" @click="confirmVisible=false">No</el-button>
            </span>
        </el-dialog>
        <ColorChart :colors="colors" v-if="ChartIsView" class="charts" />
    </div>

</template>

<script>
    import ApplyHeader from "../../components/ApplyHeader"
    import Side from '../../components/Aside.vue'
    import wrong from "../../assets/pic/wrong.png"
    import right from "../../assets/pic/right.png"
    import ColorChart from "./colorChart"
    export default {
        name: "colorTest",
        components:{ApplyHeader,Side,ColorChart},
        data(){
            return{
                ChartIsView:false,
                wrong:wrong,
                right:right,
                //题目
                subject:[
                    '0'{
                        'isTitle':false,
                        'titleText':'aaaaa',
                        'tm':{
                            0:'ewrw',
                            1:'asdfasd',
                            2:'asdfa',
                            3:'ryret4'
                        }
                    }
                ],
                exitVisible:false,
                confirmVisible:false,
                showResult:false,
                smallScreen:false,
                correctNum:0,
                totalNum:34,
                form:{},
                colors:[0,0,0,0],
                isAdmin:false,
                /**表单验证规则，所有选项都不允许为空  第10题和第26题如果一个都没有选也会提示**/
                rules: {
                    sub0: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub1: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub2: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub3: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub4: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub5: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub6: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub7: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub8: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub9: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub10: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub11: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub12: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub13: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub14: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub15: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub16: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub17: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub18: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub19: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub20: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub21: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub22: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub23: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub24: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub25: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub26: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub27: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub28: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub29: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub30: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub31: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub32: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub33: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub34: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub35: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub36: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub37: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub38: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub39: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub40: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub41: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub42: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub43: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],
                    sub44: [
                        {required: true, message: 'Required', trigger: 'blur'},
                    ],

                },
                correctAnswer0:'40/40.00/$40/$40.00',
                correctAnswer1:'643/643.00/$643/$643.00'
            }
        },
        created() {
            this.$axios.get(this.$URL.colorTestUrl+"?email="+localStorage.getItem('email'))
            .then(res=>{
                console.log(res)
            })
                 


        },
        methods:{
            addColors(){
                this.colorAdd(this.form.sub0)
                this.colorAdd(this.form.sub1)
                this.colorAdd(this.form.sub2)
                this.colorAdd(this.form.sub3)
                this.colorAdd(this.form.sub4)
                this.colorAdd(this.form.sub5)
                this.colorAdd(this.form.sub6)
                this.colorAdd(this.form.sub7)
                this.colorAdd(this.form.sub8)
                this.colorAdd(this.form.sub9)
                this.colorAdd(this.form.sub10)
                this.colorAdd(this.form.sub11)
                this.colorAdd(this.form.sub12)
                this.colorAdd(this.form.sub13)
                this.colorAdd(this.form.sub14)
                this.colorAdd(this.form.sub15)
                this.colorAdd(this.form.sub16)
                this.colorAdd(this.form.sub17)
                this.colorAdd(this.form.sub18)
                this.colorAdd(this.form.sub19)
                this.colorAdd(this.form.sub20)
                this.colorAdd(this.form.sub21)
                this.colorAdd(this.form.sub22)
                this.colorAdd(this.form.sub23)
                this.colorAdd(this.form.sub24)
                this.colorAdd(this.form.sub25)
                this.colorAdd(this.form.sub26)
                this.colorAdd(this.form.sub27)
                this.colorAdd(this.form.sub28)
                this.colorAdd(this.form.sub29)
                this.colorAdd(this.form.sub30)
                this.colorAdd(this.form.sub31)
                this.colorAdd(this.form.sub32)
                this.colorAdd(this.form.sub33)
                this.colorAdd(this.form.sub34)
                this.colorAdd(this.form.sub35)
                this.colorAdd(this.form.sub36)
                this.colorAdd(this.form.sub37)
                this.colorAdd(this.form.sub38)
                this.colorAdd(this.form.sub39)
                this.colorAdd(this.form.sub40)
                this.colorAdd(this.form.sub41)
                this.colorAdd(this.form.sub42)
                this.colorAdd(this.form.sub43)
                this.colorAdd(this.form.sub44)
            },
            confirmForm(){
                this.addColors();
                var params = {}
                params.email=localStorage.getItem('email')
                params.red = this.colors[0];
                params.blue = this.colors[1];
                params.white = this.colors[2];
                params.yellow = this.colors[3];
                // params = JSON.stringify(params);
                this.ChartIsView = true;
                this.confirmVisible = false;
                // this.$axios.post(this.$URL.colorTestUrl,params).then(res=>{
                //     console.log(res)
                // }).catch(err=>{
                //     console.log(err)
                // })
                // console.log(params)
            },
            colorAdd(color){
                if(color == 0){
                    this.colors[0]++
                }else if(color == 1){
                    this.colors[1]++
                }
                else if(color == 2){
                    this.colors[2]++
                }
                else if(color == 3){
                    this.colors[3]++
                }
            },
            coverBalance(subStr,str){
                var reg = eval("/"+subStr+"/ig");
                return reg.test(str);
            },
            goPre(){
                this.$router.go(-1)
            },
            cancel(){
                this.exitVisible=true
            },
            submit(){
                this.$refs['form'].clearValidate()
                this.$nextTick(() => {
                    this.$refs['form'].validate((valid,object) => {
                        if (valid) {
                            this.confirmVisible = true;
                            // params.applicantEmail=localStorage.getItem('email')
                            // this.$axios.post(this.$URL.medicalTestUrl,params).then(res=>{
                            //     if(res.code==0){
                            //         this.goBack()
                            //     }else{
                            //         this.$message.error({message:res.msg})
                            //     }
                            // }).catch(err=>{
                            //     this.$message.error({message:err})
                            // })
                        }else {
                            var obj = Object.keys(object)[0]
                            let dom = this.$refs[obj]
                            dom.$el.scrollIntoView({
                                //滚动到指定节点
                                block: 'center', //值有start,center,end，nearest，当前显示在视图区域中间
                                behavior: 'smooth' //值有auto、instant,smooth，缓动动画（当前是慢速的）
                            })
                            console.log('error submit!!');
                            return false;
                        }
                    })
                })
            },
        },
        mounted() {
            var clientW = document.documentElement.clientWidth
            if(clientW<1220){
                this.smallScreen=true
            }
        },
        watch:{
            '$route'(to,from){
                console.log(from.path)
                if(to.path==='/oralSurgeryTest'){
                    this.getData()
                }
            }
        }
    }
</script>

<style scoped>
    .rightPic{
        width: 20px;
        position: absolute;
        right: 20px
    }
    .el-radio{
        width:200px;
        height:43px;
        line-height:20px!important;
    }
    .radioText{
        display: inline-block;
    }
    .box>>>.el-radio__label{
        vertical-align: middle!important;
    }
    .noTitle{
        float: left;
        width: 25px;
    }
    .charts{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background: #FFFFFF;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        width: 80%;
    }
</style>